<template>
	<div class="center">
		<h1>拓 信IM</h1>
		<div class="logon" v-loading="isload"  element-loading-text="拼命加载中。。。。">
			<div :class="overlaylong">
				<el-form class="overlaylong-Signin" style="text-align: center;" v-if="disfiex == 0" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px">
					<!-- <div class="overlaylong-Signin" v-if="disfiex == 0"> -->
						<h2 class="overlaylongH2">拓 信</h2>
						<!-- <input type="text" v-model="loginForm.mobile" placeholder="电话号码">
						<input type="text" v-model="loginForm.password" placeholder="密  码"> -->
						<el-form-item label="终端" prop="terminal" style="margin-left: 600px;" v-show="false">
							<el-input type="mobile" v-model="loginForm.terminal" autocomplete="off"
							placeholder="用户名"></el-input>
						</el-form-item>
						<el-form-item label="" prop="mobile" style="margin-left: -40px;">
							<el-input type="mobile" v-model="loginForm.mobile" autocomplete="off"
							placeholder="用户名"></el-input>
						</el-form-item>
						<el-form-item label="" prop="password" style="margin-left: -40px;">
							<el-input type="password" v-model="loginForm.password" autocomplete="off"
							placeholder="密码"></el-input>
						</el-form-item>
						<!-- <el-form-item>
							<el-button type="primary" @click="submitForm('loginForm')">登陆</el-button>
							<el-button @click="resetForm('loginForm')">清空</el-button>
						</el-form-item> -->
						<h3>忘记密码？</h3>
						<el-button type="primary" class="inupbutton" @click="submitForm('loginForm')" round>登 录</el-button>
					<!-- </div> -->
				</el-form>

				<!-- <div class="overlaylong-Signup" v-if="disfiex == 1">
					<el-form :model="ruleForm" :rules="rules2" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="活动名称" prop="name">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
						<el-form-item label="活动区域" prop="region">
							<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div> -->

					<!-- <el-form  :model="loginForm" class="demo-ruleForm" :rules="rules" ref="loginForm" label-width="60px">
					<div class="overlaylong-Signin" v-if="disfiex == 0">
						<h2 class="overlaylongH2">拓 信</h2>
						<input type="text" v-model="loginForm.mobile" placeholder="电话号码">
						<input type="text" v-model="loginForm.password" placeholder="密  码">
						<el-form-item label="用户名" prop="mobile" style="margin-left: -40px;">
							<el-input type="mobile" v-model="loginForm.mobile" autocomplete="off"
							placeholder="用户名"></el-input>
						</el-form-item>
						<el-form-item label="密 码" prop="password" style="margin-left: -40px;">
							<el-input type="password" v-model="loginForm.password" autocomplete="off"
							placeholder="密 码"></el-input>
						</el-form-item>
						<el-form-item label="昵 称" prop="mobile" style="margin-left: -40px;">
							<el-input type="mobile" v-model="loginForm.mobile" autocomplete="off"
							placeholder="昵 称"></el-input>
						</el-form-item>
						
						<el-button type="primary" class="inupbutton" @click="submitForm('loginForm')" round>注 册</el-button>
					</div>
					</el-form> -->

				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">拓 信</h2>
					<input type="text" placeholder="电话号码">
					<input type="text" placeholder="密  码">
					<el-button type="primary" class="inupbutton" @click="register('registerForm')" round>注 册</el-button>
					<!-- <button class="inupbutton">注 册</button> -->
				</div>
 
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">还没有账号！</h2>
					<p class="overlaytitleP">
						输入您的个人详细信息，与我们一起开始旅程
					</p>
					<div class="buttongohs" @click="Signin">注 册</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2" >已注册，去登录</h2>
					<p class="overlaytitleP">要与我们保持联系，请使用您的个人信息登录</p>
					<div class="buttongohs" @click="Signup">登 录</div>
				</div>
			</div>
		</div>
		<div class="icp-container">
			<Icp />
		</div>
	</div>
</template>

<script>
	import {setToken} from '@/utils/auth'
	import Icp from '../components/common/Icp.vue'
	export default {
		name: "login",
		components: {
			Icp
		},
		data() {
			var checkUsername = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入电话号码'));
				}
				callback();
			};
			var checkPassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				}
				callback();
			};
			return {
                overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				disfiex: 0,
				isload:false,
				loginForm: {
					terminal: this.$enums.TERMINAL_TYPE.WEB,
					mobile: '',
					password: ''
				},
				rules: {
					mobile: [{
						validator: checkUsername,
						trigger: 'blur'
					}],
					password: [{
						validator: checkPassword,
						trigger: 'blur'
					}]
				},
				ruleForm: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
				},
				rules2: {
				name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				region: [
					{ required: true, message: '请选择活动区域', trigger: 'change' }
				],
				date1: [
					{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				],
				date2: [
					{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
				],
				type: [
					{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
				],
				resource: [
					{ required: true, message: '请选择活动资源', trigger: 'change' }
				],
				desc: [
					{ required: true, message: '请填写活动形式', trigger: 'blur' }
				]
				}
			};
		},
		created(){
			// this.setCookie('mobile', '18468015201');
			// this.setCookie('password', '123123');
		},
		methods: {
			register(msg){//注册
				this.$message.warning("暂不能提供注册功能！");
			},
			submitForm1(formName) {
				this.$refs[formName].validate((valid) => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
				});
      		},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			submitForm(formName) {
				this.isload = true;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http({
							url: "/win/login",
							method: 'post',
							data: this.loginForm
						})
						.then((data) => {             
							if(data){
								// 保存密码到cookie(不安全)
								this.setCookie('mobile', this.loginForm.mobile);
								this.setCookie('password', this.loginForm.password);
								setToken(data)
								sessionStorage.setItem('accessToken',data.accessToken);
								this.$message.success("登录成功");
								// 修改跳转路径
								this.$router.replace('/home/chat');
							}
						})
						.catch(error => {
							console.error('登录错误:', error);
							this.$message.error(error.message || "登录失败，请重试");
						})
						.finally(() => {
							this.isload = false;
						});
					} else {
						this.isload = false;
					}
				});
			},
            Signin() {//注册事件
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			},
			Signup() {//登录
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
 
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
 
			},
			// 获取cookie、
			getCookie(name) {
				let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
				let arr = document.cookie.match(reg)
				if (arr) {
					return unescape(arr[2]);
				}
				return '';
			},
			// 设置cookie,增加到vue实例方便全局调用
			setCookie(name, value, expiredays) {
				var exdate = new Date();
				exdate.setDate(exdate.getDate() + expiredays);
				document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate
					.toGMTString());
			},
			// 删除cookie
			delCookie(name) {
				var exp = new Date();
				exp.setTime(exp.getTime() - 1);
				var cval = this.getCookie(name);
				if (cval != null) {
					document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
				}
			}
		},
		mounted() {
			this.loginForm.mobile = this.getCookie("mobile");
			// cookie存密码并不安全，暂时是为了方便
			this.loginForm.password = this.getCookie("password");
		}
	}
</script>

<style>
	.center {
		width: 100vw;
		height: 100vh;
		background-image: url('../assets/image/login.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
 
	h1 {
		font-size: 30px;
		color: black;
		margin-bottom: 20px;
	}
 
	.logon {
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
		width: 768px;
		max-width: 90%;
		min-height: 480px;
		display: flex;
		background: linear-gradient(to right, 
			rgba(66, 132, 219, 0.4), 
			rgba(41, 234, 196, 0.4));
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		position: relative;
		margin: 0 auto;
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.6);
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	input {
		background-color: rgba(238, 238, 238, 0.8);
		border: 1px solid rgba(255, 255, 255, 0.3);
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}
	h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: rgba(41, 234, 196, 0.8);
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		line-height: 40px;
		margin-top: 30px;
	}

	.icp-container {
		position: fixed;
		bottom: 20px;
		width: 100%;
		text-align: center;
		color: rgba(255, 255, 255, 0.8);
		font-size: 12px;
		z-index: 1000;
	}

	@media screen and (max-width: 768px) {
		.logon {
			width: 95%;
			min-height: 400px;
		}

		.overlaylong,
		.overlaytitle {
			width: 100%;
		}
	}
</style>